<template>
  <div class="handsheet-wrap">
    <!-- navbar -->
    <div class="head nav-bar weui-tab">
      <div class="weui-navbar">
        <div
          class="weui-navbar__item nav-item"
          :class="{'active':type==index}"
          v-for="(item,index) in navConfig"
          @click="toggleBar(index)"
          :key="index"
        >
          {{item.name}}
        </div>
      </div>
    </div>
    <div
      class="weui-search-bar"
      id="searchBar"
    >
      <view>
        <picker
          class="select"
          @change="selectChange"
          :range="selectArr"
        >
          <view class="picker">{{ selectArrName }}</view>
        </picker>
      </view>

      <form class="weui-search-bar__form">

        <div class="weui-search-bar__box">
          <i
            class="weui-icon-search"
            @click="loadOrderByCondition"
          ></i>
          <input
            type="search"
            class="weui-search-bar__input"
            id="searchInput"
            placeholder="请输入查询条件"
            required=""
            v-model="searchValue"
          >
          <a
            href="javascript:"
            class="weui-icon-clear"
            id="searchClear"
            v-if="searchValue"
            @click="clear"
          ></a>
        </div>
      </form>
    </div>
    <div class="hansheet-content">
      <checkbox-group @change="selectGood">

      <div
        class="list-wrap"
        v-for="(item,index) in orderList"
        :key="index"
      >
        <!-- <div class="list-title"><img
            class="img item-title-img"
            src="/static/images/pinduoduo.png"
          ></img>
          <span style="margin-left:5px;">{{ item.trades[0].shopName ? item.trades[0].shopName : '' }}</span>
        </div> -->
        <div class="list-content clearfix">
          <!-- 订单标题 -->
          <div class="list-content-title">
            <checkbox
              :checked="item.checked"
              :id="'item'+index"
              :value="index"
              name="orderRadio"
            ></checkbox>

            <label :for="'item'+index">{{ item.orderNo }}</label>
            <span class="time fr">{{ item.dingdanshijian }}</span>
            <span class="date fr">{{ item.dingdanriqi}}</span>
          </div>
          <!-- 交易信息 -->
          <div class="list-contents">
            <div class="list-content-item clearfix">
              <div class="item-left fl">
                <img src="/static/images/save.png">
              </div>
              <div class="item-right fl">
                <div class="msg">
                  <span>{{ item.receiverName }}</span>
                  <span style="float:right;">{{ item.receiverMobile }}</span>
                </div>
                <div class="adress"> {{ item.receiverFullAddress }}</div>
              </div>
            </div>
            <div class="list-content-item clearfix">
              <div class="item-left fl">
                <img src="/static/images/send.png">
              </div>
              <div class="item-right fl">
                <div class="msg">
                  <span>{{ item.shipperName }}</span>
                  <span style="float:right;">{{ item.shipperMobile }}</span>
                </div>
                <div class="adress">{{ item.shipperFullAddress }}</div>
              </div>
            </div>

            <div class="good-name clearfix">
              <div class="info-name fl">商品名称</div>
              <div class="info-detail fl">{{ item.goods[0].goodsName }}</div>
            </div>
            <div class="good-num clearfix">
              <div class="info-name fl">商品数量</div>
              <div class="info-detail fl">{{ item.goods[0].quantity ? item.goods[0].quantity : '' }}</div>
            </div>
            <div class="good-weight clearfix">
              <div class="info-name fl">重量(kg)</div>
              <div class="info-detail fl">{{ item.goodsWeight ? item.goodsWeight : '' }}</div>
            </div>
            <div class="good-tip clearfix">
              <div class="info-name fl">备注</div>
              <div class="info-detail fl">{{  item.trades[0].sellerMessage }}</div>
            </div>
            <div class="good-tip clearfix" v-show="item.logisticsNo">
              <div class="info-name fl">运单号</div>
              <div class="info-detail fl">{{  item.logisticsNo ? item.logisticsNo : '' }}
                <img v-show="item.logisticsNo" @click="doCopy(item.logisticsNo)"  style="  height: 14px;  width: 14px;" src="/static/images/fuzhi.png" />
                <span class=fr>{{ item.logisticsCompanyName ? item.logisticsCompanyName : '' }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item-foot" v-show="!type">
          <div class="solve-btn clearfix">

            <div
              class="printf-btn fr"
              @click="dayin(item)"
            >打印快递单</div>
            <div
              class="post-btn fr"
              @click="Delete(item.orderNo)"
            >删除</div>
            <div
              class="post-btn fr"
              @click="edit(item)"
            >编辑</div>

          </div>
        </div>
        </div>
      </checkbox-group>
    </div>

    <div class="foot" v-show="!type">
      <input
        type="checkbox"
        name="checkAllRadio"
        class="fl bottom-radio"
        @click="selectAll"
        :checked="checkAll"
      />
      <span
        class="fl radio-text"
        :class="{'active':checkAll}"
      >全选</span>
      <a
        class="order-bottom-btn1 fr"
        @click="dayin('')"
      >打印快递单</a>

      <span class="fl order-count-text">已选中<span class="order-count-num">{{ selectIndex.length }}</span>个</span>
    </div>
    <div v-show="!type"
      class="add-btn"
      @click="goToAddhandsheet"
    >
      <img
        src="/static/images/add.png"
        class="add-icon"
      >
    </div>
    <mytoast ref="mytoast" />
  </div>
</template>

<script>
    import api from "@/utils/api";
    import mytoast from "@/components/toast";
export default {
  components: {mytoast},

  data() {
    return {
      type: 0, //0：待打订单 ；1：已打订单
      navConfig: [{ name: "待打订单" }, { name: "已打订单" }],
      selectIndex: [],
      selectArr: ["订单编号", "快递单号", "收件人", "手机号", "商品编码"],
      selectArrName: "订单编号",
        selectArrIndex: 0,
      searchValue: "",
      checkAll: false,
        orderList : [],
    };
  },

  created() {},
    onShow(){
      this.orderList = [];
      this.selectIndex = [];
      this.selectArrName = "订单编号";
      this.selectArrIndex = 0;
      this.searchValue = "";
      this.checkAll = false,
      this.load();
    },

  methods: {
      dayin(order) {
          var _this = this;
          var orderNoList = [];
          if (order) {
              orderNoList.push({
                  orderNo:order.orderNo,
                  isSelectShipper : order.orderExt.isSelectShipper
              });
          } else {
              for (var i in this.selectIndex) {
                  orderNoList.push({
                      orderNo : _this.orderList[this.selectIndex[i]].orderNo,
                      isSelectShipper : _this.orderList[this.selectIndex[i]].orderExt.isSelectShipper
                  });
              }
          }
          if (orderNoList.length < 1) {
              this.$refs.mytoast.show("请选择需要打印的订单");
              return;
          }
          var url =
              "../dingdandayin/main?orderNolist=" + JSON.stringify(orderNoList);
          mpvue.navigateTo({ url });
      },
      selectGood(e){
          var _this = this;
          console.log(e);
          this.selectIndex = e.mp.detail.value;
          for (var j in this.orderList) {
              _this.orderList[j].checked = false;
          }
          for (var i in this.selectIndex) {
              _this.orderList[this.selectIndex[i]].checked = true;
          }
          if (this.selectIndex.length == this.orderList.length) {
              this.checkAll = true;
          } else {
              this.checkAll = false;
          }
      },
      selectAll() {
          var _this = this;
          this.checkAll = this.checkAll == 0 ? 1 : 0;
          this.selectIndex = [];
          if (this.checkAll == 1) {
              for (var i in this.orderList) {
                  _this.selectIndex.push(i);
                  _this.orderList[i].checked = true;
              }
          } else {
              for (var i in this.orderList) {
                  _this.orderList[i].checked = false;
              }
          }
      },

      loadOrderByCondition(){
          this.load();
      },

      doCopy(yundanhao){
          wx.setClipboardData({
              data: yundanhao,
              success(res) {
                  console.log(res);
              }
          });
      },

      load(){
          var _this = this;
          _this.orderList = [];
          var formData = {
              refundStatus : 'all',
              needRefresh : 1,
              isPlamform : false
          };

              if(this.selectArrIndex == 0 ){
                  formData.searchKey = 15;
                  formData.searchValue = this.searchValue.trim();
              }else if(this.selectArrIndex == 1){
                  formData.searchKey = 16;
                  formData.searchValue = this.searchValue.trim();
              }else if(this.selectArrIndex == 2){
                  formData.searchKey = 17;
                  formData.searchValue = this.searchValue.trim();
              }else if(this.selectArrIndex == 3){
                  formData.searchKey = 18;
                  formData.searchValue = this.searchValue.trim();
              }else if(this.selectArrIndex == 4){
                  formData.searchKey = 629;
                  formData.searchValue = this.searchValue.trim();
              }

          if(this.type){
              formData.tradeStatus = 23;
          }else{
              formData.tradeStatus = 22;
          }
          wx.request({
              url: wx.getStorageSync("otherPath") + api.concernOrder +"?ecstoken=" + wx.getStorageSync("sessionId") ,
              header: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                  ecstoken : wx.getStorageSync('sessionId'),
                  fslb : wx.getStorageSync('fslb')
              },
              method: "POST",
              data: formData,
              success(res) {
                  console.log(res);
                  if(res.data.code != 200){
                      _this.$refs.mytoast.show(res.data.msg);
                      return ;
                  }
                  var list = [];
                  if(res.data.data.page.data && res.data.data.page.data[0]){
                      list = res.data.data.page.data[0].data;
                  }
                  for (var i in list) {
                      list[i].checked = false;
                      list[i].shipperFullAddress = list[i].shipperProvince + list[i].shipperCity + list[i].shipperCounty + list[i].shipperAddress;
                      list[i].dingdanriqi = _this.dingdanriqi(list[i].sourceCreateDate);
                      list[i].dingdanshijian = _this.dingdanshijian(list[i].sourceCreateDate);
                  }
                  _this.orderList = list;

              },
              fail(res) {
                  console.log(res);
                  _this.$refs.mytoast.show("网络异常");
              },
              complete(){
              }
          });
      },

      Delete(orderNo){
          var _this = this;
          var orderNoList = [];
          if (orderNo) {
              orderNoList.push(orderNo);
          }
          wx.request({
              url: wx.getStorageSync("otherPath") + api.deleteOrders +"?ecstoken=" + wx.getStorageSync("sessionId") ,
              header: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                  ecstoken : wx.getStorageSync('sessionId'),
                  fslb : wx.getStorageSync('fslb')
              },
              method: "POST",
              data: {
                  orderNos : orderNoList,
              },
              success(res) {
                  console.log(res);
                  if(res.data.code != 200){
                      _this.$refs.mytoast.show(res.data.msg);
                      return ;
                  }
                  _this.$refs.mytoast.show("删除成功");
                  _this.load();

              },
              fail(res) {
                  console.log(res);
                  _this.$refs.mytoast.show("网络异常");
              },
              complete(){
              }
          });
      },

      edit(item){
          var url = "../addhandsheet/main?item="+ JSON.stringify(item);
          mpvue.navigateTo({ url });
      },

      add0(m) {
          return m < 10 ? "0" + m : m;
      },

      dingdanriqi(time) {
          //timestamp是整数，否则要parseInt转换,不会出现少个0的情况
          var time = new Date(time);
          var year = time.getFullYear();
          var month = time.getMonth() + 1;
          var date = time.getDate();
          return year + "-" + this.add0(month) + "-" + this.add0(date);
      },
      dingdanshijian(time) {
          var time = new Date(time);
          var hours = time.getHours();
          var minutes = time.getMinutes();
          var seconds = time.getSeconds();
          return (
              this.add0(hours) + ":" + this.add0(minutes) + ":" + this.add0(seconds)
          );
      },

    clear() {
      this.searchValue = "";
    },
    toggleBar(index) {
      this.type = index;
      this.load();
    },
    selectChange(e) {
      var index = e.mp.detail.value;
      this.selectArrIndex = index;
      this.selectArrName = this.selectArr[index];
    },
    goToAddhandsheet() {
      var url = "../addhandsheet/main";
      mpvue.navigateTo({ url });
    }
  }
};
</script>
<style lang="wxss">
page {
  width: 100%;
  height: 100%;
  background-color: #f7fbff;
}
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
}
/*复选框外框选中样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border-color: #0077ff;
  background-color: #0077ff;
}
/*复选框选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  content: "\00a0";
  display: inline-block;
  border: 4rpx solid #fff;
  border-top-width: 0;
  border-right-width: 0;
  width: 18rpx;
  height: 10rpx;
  transform: rotate(-50deg);
  position: absolute;
  top: 8rpx;
  left: 6rpx;
}
/* 输入框 */
.weui-search-bar {
  position: relative;
  width: 100%;
  height: 81rpx;
  background-color: #f7fbff;
}
.select {
  position: absolute;
  top: 17rpx;
  left: 45rpx;
  width: 23%;
  height: 50rpx;
  /* border-radius: 25rpx; */
  border-right: 1rpx solid #e8eaf0;
  font-size: 26rpx;
  line-height: 50rpx;
  color: #373e4f;
  font-weight: 500;
  z-index: 10;
}
.select::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 20rpx;
  top: 14rpx;
  width: 14rpx;
  height: 14rpx;
  border-right: 1rpx solid #888;
  border-top: 1rpx solid #888;
  -webkit-transform: rotate(135deg); /*箭头方向可以自由切换角度*/
  transform: rotate(135deg);
}
.weui-search-bar {
  padding: 16rpx 30rpx;
}
.weui-search-bar .weui-search-bar__form {
  width: 85%;
  height: 75rpx;
  margin: 0 auto;
  border-radius: 40rpx;
  box-shadow: 0px 1rpx 6rpx 0px rgba(0, 119, 255, 0.16);
}
.weui-search-bar__box {
  padding-left: 240rpx;
}
.weui-search-bar__box .weui-search-bar__input {
  height: 100%;
  font-size: 26rpx;
  line-height: 75rpx;
  padding: 0;
}
/* 调整搜索的起始位置 */
.weui-search-bar__box .weui-icon-search {
  left: 200rpx;
  margin-top: -23rpx;
}
</style>
<style>
.weui-navbar {
  height: 1rem;
  line-height: 1rem;
}

.weui-navbar__item::after {
  display: none;
}
</style>
<style scoped>
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* nav */
.nav-item {
  display: inlinea-block;
  font-family: PingFang SC;
  font-size: 0.28rem;
  font-weight: 500;
  color: rgba(118, 125, 143, 1);
  line-height: 0.3rem;
  border: none;
  background: #fff;
}

.nav-item.active {
  color: #0077ff;
}

.nav-item.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 40%;
  height: 4rpx;
  bottom: 3rpx;
  left: 30%;
  background: #0077ff;
}

/* content */
.hansheet-content {
  padding-bottom: 0.8rem;
}

/* list */
.list-wrap {
  width: 100%;
  background: #fff;
  margin-bottom: 0.2rem;
  box-shadow: 0px 2px 4px 0px rgba(7, 127, 255, 0.1);
}
.list-wrap .list-title {
  /*width: 100%;*/
  height: 0.8rem;
  padding: 0 0.3rem;
  font-size: 0.28rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #373e4f;
  line-height: 0.8rem;
  border-bottom: 1px solid #e8eaf0;
}

.list-content {
  width: calc(100% - 0.6rem);
  margin: 0 0.3rem;
  color: rgba(55, 62, 79, 1);
}

.list-content .list-content-title {
  width: 100%;
  height: 0.8rem;
  /* margin: 0 0.3rem; */
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #767d8f;
  line-height: 0.8rem;
  border-bottom: 1px solid #e8eaf0;
}

.list-content-title .circle {
  /* transform: scale(0.7); */
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #999;
  border-radius: 100%;
}

.list-content-title .date {
  margin-left: 0.57rem;
}

.list-content-title .time {
  margin-left: 0.25rem;
}

.list-content .printf {
  float: right;
  font-size: 0.24rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 119, 255, 1);
  line-height: 0.8rem;
}
/* 列表主体 */
.list-content-item,
.good-name,
.good-num,
.good-weight,
.good-tip {
  border-bottom: 1rpx solid #e8eaf0;
  padding: 32rpx 0;
}
.good-tip {
  border-bottom: none;
}

/* 个人信息右侧 */
.list-content-item .item-right {
  width: calc(100% - 120rpx);
}
.list-content-item .item-right .msg {
  float: left;
  width: 100%;
  font-size: 26rpx;
  line-height: 30rpx;
}
.list-content-item .item-right .adress {
  float: left;
  font-size: 24rpx;
  line-height: 30rpx;
  color: #767d8f;
}
/* 货物信息 */
.info-name {
  width: 170rpx;
  height: 100%;
  color: #a3aab7;
  font-size: 26rpx;
  line-height: 30rpx;
}
.info-detail {
  font-size: 26rpx;
  width: calc(100% - 170rpx);
}
/* 个人信息左侧 */
.list-content-item .item-left {
  width: 120rpx;
}
.list-content-item .item-left img {
  width: 50rpx;
  height: 50rpx;
}
/* item 底部操作项 */
.item-foot {
  padding: 15rpx;
  border-top: 1px solid #e8eaf0;
}
.solve-btn {
  /* position: relative; */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

}
.solve-btn .printf-btn {
  /* position: absolute;
  top: 0.15rem;
  right: 2.1rem; */
  /* width: 1.5rem;
  height: 0.5rem; */
  padding: 6rpx 18rpx;
  border-radius: 0.5rem;
  text-align: center;
  font-size: 0.24rem;
  height: 20px;
  line-height: 20px;
}
.solve-btn .post-btn {
  padding: 6rpx 0;
  margin-right: 31rpx;
  text-align: center;
  font-size: 0.24rem;
  color: #0077ff;
}
.solve-btn .printf-btn {
  color: #ff8900;
  border: 1px solid #ff8900;
}

/* 底部按钮 */

.foot {
  text-align: center;
  vertical-align: middle;
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 40px;
}
.foot a {
  width: 25%;
  height: 0.8rem;
  line-height: 0.8rem;
}

.order-bottom-btn1 {
  color: #fff;
  background-color: #ff8900;
}

.order-bottom-btn2 {
  color: #fff;
  background-color: #0077ff;
}

/* 统计数量 */
.order-count-text {
  color: #767d8f;
  font-size: 24rpx;
  margin-left: 100rpx;
}

.order-count-num {
  color: #ff5353;
}

/* 全选按钮 */
.bottom-radio {
  color: #a3aab7;
  line-height: 38px;
  padding-left: 15px;
}

.radio-text {
  font-size: 24rpx;
  color: #373e4f;
}

.radio-text.active {
  color: #0077ff;
}

/* 悬浮新增入口 */
.add-btn {
  width: 68rpx;
  height: 68rpx;
  border-radius: 34rpx;
  position: fixed;
  left: 21rpx;
  bottom: 80rpx;
}
.add-icon {
  width: 100%;
  height: 100%;
}
.deliver,
.solve-btn {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  padding: 0 0.3rem;
}

.deliver {
  font-size: 0.26rem;
  border-top: 1px solid #e8eaf0;
  border-bottom: 1px solid #e8eaf0;
}

.deliver img{
  height: 14px;
  width: 14px;
}
</style>
